<template>
  <div class="selectDate">
    <van-nav-bar
      title="选着详细信息"
      @click-left="onClickLeft"
      left-text="返回"
      left-arrow
    >
      <template #right>
        <van-icon name="service" size="18" />
      </template>
    </van-nav-bar>
    <div class="selectDate_con">
      <!-- 出发城市 -->
      <van-field
        v-model="fieldValueCity"
        is-link
        readonly
        :label="columnsCity.title"
        placeholder="选择城市"
        @click="showPickerCity = true"
      />
      <van-popup v-model:show="showPickerCity" round position="bottom">
        <van-picker
          :columns="columnsCity.list"
          @cancel="showPickerCity = false"
          @confirm="onConfirmCity"
          :columns-field-names="customFieldNameCity"
        />
      </van-popup>
      <!-- 选着套餐类型 -->
      <van-field
        v-model="fieldValueType"
        is-link
        readonly
        :label="columnsType.title"
        placeholder="选类型"
        @click="showPickerType = true"
      />
      <van-popup v-model:show="showPickerType" round position="bottom">
        <van-picker
          :columns="columnsType.list"
          @cancel="showPickerType = false"
          @confirm="onConfirmType"
          :columns-field-names="customFieldNameType"
        />
      </van-popup>
      <!-- 选着日期 -->
      <van-cell
        title="选择单个日期"
        :value="date"
        @click="show = true"
        is-link
      />
      <van-calendar v-model:show="show" @confirm="onConfirm" color="#ee0a24" />
    </div>
    <!--  -->
    <van-submit-bar
      button-text="立即预定"
      tip-icon="info-o"
      @submit="onSubmit"
      button-color="#c04374"
      :disabled="!flay"
    />
    <Loading :isShow="showLoad" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { reqCombo } from "@/api/home";
import Loading from "@/components/loading.vue";
const route = useRoute();
const router = useRouter();
const product_id = route.query.id;
const onClickLeft = () => history.back();
let showLoad = ref(true);
// const columnsCity = [{ text: "三亚", value: "SanYa" }];
let columnsCity = ref("");
// const columnsType = [{ text: "价格现询" }];
let columnsType = ref("");
const fieldValueCity = ref("");
const departId = ref("");
const fieldValueType = ref("");
const setMealId = ref("");
const showPickerCity = ref(false);
const showPickerType = ref(false);
let flay = ref(false);
const customFieldNameCity = {
  text: "name",
  value: "id",
};
const customFieldNameType = {
  text: "name",
  value: "id",
  price: "price",
  min_price: "min_price",
};
const loadCombo = async () => {
  const result = await reqCombo({ product_id });
  console.log(result.data);
  console.log(result.data.group_list[1].list);
  if (result.code == 0) {
    columnsCity.value = result.data.group_list[0];
    columnsType.value = result.data.group_list[1];
    showLoad.value = false;
  }
};
loadCombo();
// 出发城市
const onConfirmCity = ({ selectedOptions }) => {
  showPickerCity.value = false;
  fieldValueCity.value = selectedOptions[0].name;
  departId.value = selectedOptions[0].id;
  btnFlay();
};
const onConfirmType = ({ selectedOptions, selectedIndexes }) => {
  showPickerType.value = false;
  fieldValueType.value = selectedOptions[0].name;
  setMealId.value = selectedOptions[0].id;
  console.log(selectedOptions);
  btnFlay();
};
// 选着日期
const date = ref("");
const show = ref(false);

const formatDate = (date) =>
  `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
  btnFlay();
};
const btnFlay = () => {
  if (fieldValueCity.value && fieldValueType.value && date.value) {
    flay.value = true;
  }
};
const onSubmit = () => {
  router.push({
    path: "/trip",
    query: {
      product_id,
      date: date.value,
      departId: departId.value,
      setMealId: setMealId.value,
    },
  });
  console.log(departId.value);
  console.log(setMealId.value);
};
</script>

<style scoped>
.selectDate_con {
  padding: 0 10px;
}
</style>
